<template>
  <div id="app">
    <!-- 路由视图 -->
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useUserStore } from '@/store/user'

/**
 * 应用根组件
 * 处理应用初始化逻辑和全局状态
 */

const userStore = useUserStore()

/**
 * 应用初始化
 */
onMounted(() => {
  // 初始化用户信息（暂时注释掉token相关逻辑）
  // userStore.initUserInfo()
  
  // 移除加载动画
  const loading = document.querySelector('.loading')
  if (loading) {
    loading.style.display = 'none'
  }
})
</script>

<style lang="scss">
#app {
  width: 100%;
  min-height: 100vh;
  background-color: #f7f8fa;
}

// 路由切换动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>